<script setup lang="ts">
import { reactive } from 'vue';
import {
    EInput,
    EButton,
    EFormItem,
} from 'exploria-ui';

const registerFormData = reactive({
    username: '',
    password: '',
});

const register = () => {};
</script>

<template>
    <form class="register-form" @submit.prevent="register">
        <EFormItem
            :show-error="!registerFormData.username"
            error-message="请设置用户名"
        >
            <EInput
                type="text"
                placeholder="请输入用户名"
                v-model="registerFormData.username"
            />
        </EFormItem>
        <EFormItem
            :show-error="!registerFormData.password"
            error-message="请设置密码"
        >
            <EInput
                type="password"
                placeholder="请输入密码"
                v-model="registerFormData.password"
            />
        </EFormItem>
        <EButton>注册</EButton>
    </form>
</template>

<style scoped lang="scss">
.register-form {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
</style>
